<template>
  <div class="box">
    <div class="head">
      <img
        src="../../image/22.png"
        @click="fh"
        style="width: 32px; height: 32px"
        alt=""
        class="img-left"
      />
      <span class="tx">H币提现</span> <span @click="golist" class="tx1">提现记录</span>
    </div>

    <div class="main">
      <div class="main-top">
        <div class="m-t-l">到账银行卡</div>

        <div class="m-t-c">
          <p>中国建设银行</p>
          <p style="color: #3087ea">当天24点前到账</p>
        </div>

        <div class="m-t-r">
          <img src="../../image//right.png" style="width: 28px; height: 28px" alt="" />
        </div>
      </div>

      <div class="main">
        <div class="main-main">
          <p style="font-size: 30px; margin-left: 40px">充值金额</p>
          <div class="mt-1">
            <span style="font-size: 100px; margin-right: 30px">￥</span>
            <span class="put">
              <input type="text" style="outline: none" v-model="moneyB" class="put-1"
            /></span>
          </div>

          <div class="mt-2">
            <p>
              <input type="checkbox" class="input1" />
              全部提现. 3050H币，可提现30元
            </p>
          </div>

          <div class="mt-3">
            <button class="foot-bt" @click="goTixian">提现</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const moneyB: any = ref(0)

const userId = ref(JSON.parse(localStorage.getItem('userId') || ''))
const sessionId = ref(JSON.parse(localStorage.getItem('sessionId') || ''))

const goTixian = () => {
  if (moneyB.value <= 0) {
    return
  } else {
    localStorage.setItem('moneyB', moneyB.value)
    // localStorage.setItem('moneyA', JSON.stringify(moneyA.value))
    router.push('/HTiXian')
  }
}

const fh = () => {
  router.go(-1)
}

const golist = () => {
  router.push('/reflectlist')
}

// const goTixian=()=>{
//     router.push('/HTiXian')
// }

const txjk = async () => {
  await axios
    .post(
      '/health/user/verify/v1/drawCash',
      {
        money: 1,
        payType: 2,
      },
      {
        headers: {
          userId: userId.value as number,
          sessionId: sessionId.value as string,
          'Content-Type': 'application/x-www-form-urlencoded',
        },
      },
    )
    .then((res) => {
      console.log(res.data, '666666')
    })
}
txjk()

const bd = async () => {
  await axios
    .post(
      '/health/user/verify/v1/bindUserIdCard',
      {
        userId: userId.value as number,
        name: '哈哈',
        sex: '男',
        nation: '汉',
        birthday: '2001-5-18',
        address: '孟州市',
        idNumber: '410883200105185513',
        issueOffice: '孟州市公安局',
      },
      {
        headers: {
          userId: userId.value as number,
          sessionId: sessionId.value as string,
          'Content-Type': 'application/x-www-form-urlencoded',
        },
      },
    )
    .then((res) => {
      console.log(res.data, '绑定')
    })
}
bd()
</script>

<style scoped lang="scss">
.box {
  display: flex;
  display: inline-block;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.head {
  display: flex;
  width: 100%;
  height: 60px; // 120px * 0.5
  align-items: center;
  border-bottom: 10px solid #f2f2f2; // 20px * 0.5
}
.img-left {
  margin-left: 30px; // 60px * 0.5
}
.tx {
  margin-left: 30%; // 31% * 0.5
  font-size: 18px; // 35px * 0.5
}
.tx1 {
  margin-left: 20%; // 22% * 0.5
  font-size: 12px; // 25px * 0.5
}
.main {
  display: flex;
  display: inline-block;
  width: 100%;
  height: 100%;
}

.main-top {
  display: flex;
  display: inline-block;
  width: 90%; // 90% * 0.5
  height: 100px; // 200px * 0.5
  margin-left: 5%; // 5% * 0.5
  background-color: #f2f2f2;
  border-radius: 10px; // 20px * 0.5
  margin-top: 50px; // 100px * 0.5
}

.m-t-l {
  float: left;
  margin-top: 20px; // 40px * 0.5
  margin-left: 15px; // 30px * 0.5
}
.m-t-c {
  float: left;
  margin-top: 7.5px; // 15px * 0.5
  margin-left: 55px; // 110px * 0.5
}
.m-t-r {
  float: left;
  margin-left: 75px; // 150px * 0.5
  margin-top: 32.5px; // 65px * 0.5
}

.main-main {
  display: flex;
  display: inline-block;
  width: 90%; // 90% * 0.5
  height: 300px; // 600px * 0.5
  margin-left: 5%; // 5% * 0.5
  background-color: #f2f2f2;

  margin-top: 5px; // 10px * 0.5
}

.mt-1 {
  display: flex;
  width: 100%; // 90% * 0.5
  height: 65px; // 130px * 0.5
  padding-bottom: 10px; // 20px * 0.5
  padding-left: 20px; // 20px * 0.5
  border-bottom: 1.5px solid #fff; // 3px * 0.5
}
.mt-2 {
  margin-left: 17.5px; // 35px * 0.5
  font-size: 11.5px; // 23px * 0.5
}

.put {
  margin-top: 15px; // 30px * 0.5
  display: flex;
  height: 50px; // 100px * 0.5
}
.put-1 {
  width: 200px; // 350px * 0.5
  height: 50px; // 100px * 0.5
  border: none;
  outline: none;
  font-size: 50px; // 90px * 0.5
  color: #3087ea;
  background-color: #f2f2f2;
}

.foot-bt {
  width: 80%; // 80% * 0.5
  height: 40px; // 80px * 0.5
  background-color: #3087ea;
  color: #fff;
  margin-left: 10%; // 10% * 0.5
  border: none;
  margin-top: 50px; // 100px * 0.5
}

.input1 {
  display: flex;
  width: 10px;
  height: 10px;
  float: left;
  margin-right: 10px;
  margin-top: 3px;
}
</style>
